<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签管理 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/tag-management.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">客户管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">标签管理</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3 class="sidebar-title">客户管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="customer-list.html" class="menu-link">
                            <i class="fas fa-users"></i>
                            <span>客户档案</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="customer-form.html" class="menu-link">
                            <i class="fas fa-user-plus"></i>
                            <span>新增客户</span>
                        </a>
                    </li>
                    <li class="menu-item active">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>标签管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3 class="sidebar-title">业务管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-calendar-check"></i>
                            <span>邀约活动</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>线路产品</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">标签管理</h1>
                <p class="page-subtitle">管理客户标签分类，优化客户档案标记体系</p>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" id="import-tags-btn">
                    <i class="fas fa-upload"></i>
                    导入标签
                </button>
                <button class="btn btn-primary" id="add-tag-btn">
                    <i class="fas fa-plus"></i>
                    新增标签
                </button>
            </div>
        </header>

        <!-- 搜索和筛选区域 -->
        <section class="search-filter-section">
            <div class="search-filter-container">
                <!-- 搜索框 -->
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" placeholder="搜索标签名称或描述" class="search-input" id="search-input">
                    <button class="search-clear" id="search-clear">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <!-- 筛选器 -->
                <div class="filter-controls">
                    <div class="filter-group">
                        <label class="filter-label">标签分类</label>
                        <select class="filter-select" id="category-filter">
                            <option value="">全部分类</option>
                            <option value="客户等级">客户等级</option>
                            <option value="健康状况">健康状况</option>
                            <option value="兴趣偏好">兴趣偏好</option>
                            <option value="服务需求">服务需求</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">使用状态</label>
                        <select class="filter-select" id="status-filter">
                            <option value="">全部状态</option>
                            <option value="active">启用中</option>
                            <option value="inactive">已停用</option>
                        </select>
                    </div>

                    <button class="btn btn-outline" id="reset-filters">
                        <i class="fas fa-undo"></i>
                        重置
                    </button>
                </div>
            </div>
        </section>

        <!-- 统计卡片 -->
        <section class="stats-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon stat-primary">
                        <i class="fas fa-tags"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">48</div>
                        <div class="stat-label">总标签数</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +6
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-success">
                        <i class="fas fa-tag"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">42</div>
                        <div class="stat-label">启用标签</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +4
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-info">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">5</div>
                        <div class="stat-label">标签分类</div>
                        <div class="stat-change neutral">
                            <i class="fas fa-minus"></i>
                            0
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-warning">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">1,186</div>
                        <div class="stat-label">使用客户数</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +28
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 标签分类管理 -->
        <section class="categories-section">
            <div class="section-header">
                <h2 class="section-title">标签分类</h2>
                <button class="btn btn-outline btn-small" id="manage-categories-btn">
                    <i class="fas fa-cog"></i>
                    管理分类
                </button>
            </div>
            
            <div class="categories-grid">
                <div class="category-card" data-category="客户等级">
                    <div class="category-header">
                        <div class="category-icon">
                            <i class="fas fa-crown"></i>
                        </div>
                        <div class="category-info">
                            <h3 class="category-name">客户等级</h3>
                            <p class="category-desc">根据客户价值和贡献度分级</p>
                        </div>
                        <div class="category-count">12个标签</div>
                    </div>
                    <div class="category-tags">
                        <span class="tag tag-vip">VIP客户</span>
                        <span class="tag tag-quality">优质客户</span>
                        <span class="tag tag-normal">普通客户</span>
                        <span class="tag tag-potential">潜在客户</span>
                        <span class="more-tags">+8</span>
                    </div>
                </div>

                <div class="category-card" data-category="健康状况">
                    <div class="category-header">
                        <div class="category-icon">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <div class="category-info">
                            <h3 class="category-name">健康状况</h3>
                            <p class="category-desc">客户身体健康和护理需求</p>
                        </div>
                        <div class="category-count">8个标签</div>
                    </div>
                    <div class="category-tags">
                        <span class="tag tag-health">身体健康</span>
                        <span class="tag tag-careful">需要关怀</span>
                        <span class="tag tag-care">需要照顾</span>
                        <span class="tag tag-mobility">行动不便</span>
                        <span class="more-tags">+4</span>
                    </div>
                </div>

                <div class="category-card" data-category="兴趣偏好">
                    <div class="category-header">
                        <div class="category-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="category-info">
                            <h3 class="category-name">兴趣偏好</h3>
                            <p class="category-desc">客户的旅游兴趣和偏好类型</p>
                        </div>
                        <div class="category-count">15个标签</div>
                    </div>
                    <div class="category-tags">
                        <span class="tag tag-nature">自然风光</span>
                        <span class="tag tag-culture">人文历史</span>
                        <span class="tag tag-leisure">休闲度假</span>
                        <span class="tag tag-adventure">探险体验</span>
                        <span class="more-tags">+11</span>
                    </div>
                </div>

                <div class="category-card" data-category="服务需求">
                    <div class="category-header">
                        <div class="category-icon">
                            <i class="fas fa-concierge-bell"></i>
                        </div>
                        <div class="category-info">
                            <h3 class="category-name">服务需求</h3>
                            <p class="category-desc">客户对服务的特殊要求</p>
                        </div>
                        <div class="category-count">10个标签</div>
                    </div>
                    <div class="category-tags">
                        <span class="tag tag-premium">高端服务</span>
                        <span class="tag tag-economy">经济实惠</span>
                        <span class="tag tag-group">团体出行</span>
                        <span class="tag tag-solo">独自旅行</span>
                        <span class="more-tags">+6</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 标签列表 -->
        <section class="table-section">
            <div class="table-header">
                <div class="table-title">
                    <h2>标签列表</h2>
                    <span class="result-count">共 48 个标签</span>
                </div>
                <div class="table-actions">
                    <button class="btn btn-outline" id="export-tags-btn">
                        <i class="fas fa-download"></i>
                        导出
                    </button>
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="table">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="view-btn" data-view="grid">
                            <i class="fas fa-th"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 表格视图 -->
            <div class="table-container" id="table-view">
                <table class="tags-table">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="name">
                                标签名称
                                <i class="fas fa-sort"></i>
                            </th>
                            <th>标签分类</th>
                            <th>标签描述</th>
                            <th class="sortable" data-sort="usage_count">
                                使用次数
                                <i class="fas fa-sort"></i>
                            </th>
                            <th>状态</th>
                            <th class="sortable" data-sort="created_at">
                                创建时间
                                <i class="fas fa-sort"></i>
                            </th>
                            <th class="actions-column">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tags-table-body">
                        <tr class="tag-row" data-tag-id="1">
                            <td class="tag-name">
                                <div class="tag-display">
                                    <span class="tag tag-vip">VIP客户</span>
                                    <span class="tag-text">VIP客户</span>
                                </div>
                            </td>
                            <td>
                                <span class="category-badge category-level">客户等级</span>
                            </td>
                            <td class="tag-description">高价值客户，享受优先服务</td>
                            <td class="usage-count">324</td>
                            <td>
                                <span class="status-badge status-active">启用中</span>
                            </td>
                            <td>2025-01-10</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="编辑" onclick="editTag(1)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="查看客户" onclick="viewTagCustomers(1)">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showTagActions(1)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="tag-row" data-tag-id="2">
                            <td class="tag-name">
                                <div class="tag-display">
                                    <span class="tag tag-health">身体健康</span>
                                    <span class="tag-text">身体健康</span>
                                </div>
                            </td>
                            <td>
                                <span class="category-badge category-health">健康状况</span>
                            </td>
                            <td class="tag-description">身体状况良好，无特殊护理需求</td>
                            <td class="usage-count">856</td>
                            <td>
                                <span class="status-badge status-active">启用中</span>
                            </td>
                            <td>2025-01-08</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="编辑" onclick="editTag(2)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="查看客户" onclick="viewTagCustomers(2)">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showTagActions(2)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="tag-row" data-tag-id="3">
                            <td class="tag-name">
                                <div class="tag-display">
                                    <span class="tag tag-nature">自然风光</span>
                                    <span class="tag-text">自然风光</span>
                                </div>
                            </td>
                            <td>
                                <span class="category-badge category-interest">兴趣偏好</span>
                            </td>
                            <td class="tag-description">喜欢山水风景、自然景观</td>
                            <td class="usage-count">542</td>
                            <td>
                                <span class="status-badge status-active">启用中</span>
                            </td>
                            <td>2025-01-05</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="编辑" onclick="editTag(3)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="查看客户" onclick="viewTagCustomers(3)">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showTagActions(3)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="tag-row" data-tag-id="4">
                            <td class="tag-name">
                                <div class="tag-display">
                                    <span class="tag tag-care">需要照顾</span>
                                    <span class="tag-text">需要照顾</span>
                                </div>
                            </td>
                            <td>
                                <span class="category-badge category-health">健康状况</span>
                            </td>
                            <td class="tag-description">需要额外照顾和帮助的客户</td>
                            <td class="usage-count">127</td>
                            <td>
                                <span class="status-badge status-active">启用中</span>
                            </td>
                            <td>2025-01-03</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="编辑" onclick="editTag(4)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="查看客户" onclick="viewTagCustomers(4)">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showTagActions(4)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 卡片视图 -->
            <div class="grid-container" id="grid-view" style="display: none;">
                <div class="tags-grid" id="tags-grid-body">
                    <div class="tag-card" data-tag-id="1">
                        <div class="tag-card-header">
                            <span class="tag tag-vip large">VIP客户</span>
                            <div class="tag-actions">
                                <button class="tag-action-btn" title="编辑" onclick="editTag(1)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="tag-action-btn" title="更多" onclick="showTagActions(1)">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="tag-card-body">
                            <div class="tag-category">
                                <span class="category-badge category-level">客户等级</span>
                            </div>
                            <p class="tag-description">高价值客户，享受优先服务</p>
                            
                            <div class="tag-stats">
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>324名客户使用</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-calendar"></i>
                                    <span>2025-01-10 创建</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tag-card-footer">
                            <button class="card-btn primary" onclick="viewTagCustomers(1)">
                                <i class="fas fa-users"></i>
                                查看客户
                            </button>
                            <span class="status-badge status-active">启用中</span>
                        </div>
                    </div>

                    <div class="tag-card" data-tag-id="2">
                        <div class="tag-card-header">
                            <span class="tag tag-health large">身体健康</span>
                            <div class="tag-actions">
                                <button class="tag-action-btn" title="编辑" onclick="editTag(2)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="tag-action-btn" title="更多" onclick="showTagActions(2)">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="tag-card-body">
                            <div class="tag-category">
                                <span class="category-badge category-health">健康状况</span>
                            </div>
                            <p class="tag-description">身体状况良好，无特殊护理需求</p>
                            
                            <div class="tag-stats">
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>856名客户使用</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-calendar"></i>
                                    <span>2025-01-08 创建</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tag-card-footer">
                            <button class="card-btn primary" onclick="viewTagCustomers(2)">
                                <i class="fas fa-users"></i>
                                查看客户
                            </button>
                            <span class="status-badge status-active">启用中</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示第 1-20 条，共 48 条记录
                </div>
                <div class="pagination">
                    <button class="page-btn" disabled>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <button class="page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="page-size-selector">
                    <label>每页显示</label>
                    <select id="page-size">
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <label>条</label>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框：新增/编辑标签 -->
    <div class="modal-overlay" id="tag-modal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title" id="tag-modal-title">新增标签</h3>
                <button class="modal-close" onclick="closeTagModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="tag-form">
                    <div class="form-group">
                        <label class="form-label">标签名称 *</label>
                        <input type="text" class="form-input" id="tag-name" placeholder="请输入标签名称" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">标签分类 *</label>
                        <select class="form-select" id="tag-category" required>
                            <option value="">请选择分类</option>
                            <option value="客户等级">客户等级</option>
                            <option value="健康状况">健康状况</option>
                            <option value="兴趣偏好">兴趣偏好</option>
                            <option value="服务需求">服务需求</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">标签描述</label>
                        <textarea class="form-textarea" id="tag-description" placeholder="请输入标签描述"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">标签颜色</label>
                        <div class="color-picker">
                            <input type="color" id="tag-color" value="#007AFF" class="color-input">
                            <div class="color-presets">
                                <button type="button" class="color-preset" data-color="#007AFF" style="background-color: #007AFF;"></button>
                                <button type="button" class="color-preset" data-color="#34C759" style="background-color: #34C759;"></button>
                                <button type="button" class="color-preset" data-color="#FF9500" style="background-color: #FF9500;"></button>
                                <button type="button" class="color-preset" data-color="#FF3B30" style="background-color: #FF3B30;"></button>
                                <button type="button" class="color-preset" data-color="#AF52DE" style="background-color: #AF52DE;"></button>
                                <button type="button" class="color-preset" data-color="#FF2D92" style="background-color: #FF2D92;"></button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" name="tag-status" value="active" checked>
                                <span class="radio-text">启用</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="tag-status" value="inactive">
                                <span class="radio-text">停用</span>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeTagModal()">取消</button>
                <button class="btn btn-primary" onclick="saveTag()">保存</button>
            </div>
        </div>
    </div>

    <!-- 模态框：操作菜单 -->
    <div class="modal-overlay" id="tag-action-modal">
        <div class="action-menu">
            <button class="action-menu-item" onclick="editTag()">
                <i class="fas fa-edit"></i>
                <span>编辑标签</span>
            </button>
            <button class="action-menu-item" onclick="duplicateTag()">
                <i class="fas fa-copy"></i>
                <span>复制标签</span>
            </button>
            <button class="action-menu-item" onclick="viewTagCustomers()">
                <i class="fas fa-users"></i>
                <span>查看使用客户</span>
            </button>
            <button class="action-menu-item" onclick="exportTagData()">
                <i class="fas fa-download"></i>
                <span>导出数据</span>
            </button>
            <button class="action-menu-item danger" onclick="deleteTag()">
                <i class="fas fa-trash"></i>
                <span>删除标签</span>
            </button>
            <button class="action-menu-item cancel" onclick="closeTagActionModal()">
                <i class="fas fa-times"></i>
                <span>取消</span>
            </button>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/tag-management.js"></script>
</body>
</html>